Unit 5: Structuring Web Page Using HTML 


Tables 


The HTML tables allow web authors to arrange data like text, images, links, other tables, 
etc. into rows and columns of cells. 


The HTML tables are created using the <table> tag in which the <tr> tag is used to create table 
rows and <td> tag is used to create data cells. The elements under <td> are regular and left 
aligned by default 


Example 





<! 





DOC BY PI 





E html> 























<html> 
<head> 
<title>HTML Tables</title> 
</head> 
<body> 
<table border = "1"> 





Acre 
<taeRowaele Col uimnemli< Gee 
<td>Row = eolumn Peed 

SE 





<tr> 
<td>Row 2, Column 1</td> 
<td>Row 2, Column 2</td> 
<M 
</table> 











</body> 
Wh Can) > 


Here, the border is an attribute of <table> tag and it is used to put a border across all the cells. 
If you do not need a border, then you can use border = "0". 


Table Heading 


Table heading can be defined using <th> tag. This tag will be put to replace <td> tag, which is 
used to represent actual data cell. Normally you will put your top row as table heading as 
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shown below, otherwise you can use <th> element in any row. Headings, which are defined in 
<th> tag are centered and bold by default. 


Example 


<!DOCTYPE html> 
<html> 





<head> 
<title>HTML Table Header</title> 
</head> 


<body> 
<table border = "1"> 

<tr 
<th>Name</th> 
<th>Salary</th> 

K/T 

L 
<td>Ramesh Raman</td> 
<td>5000</td> 

</ CT 


[LCL A 
<td>Shabbir Hussein</td> 
e 7.0,0,0 <o/mieteles 
</tr> 
</table> 
</body> 





| </html> 


Cellpadding and Cellspacing Attributes: 


There are two attributes called cellpadding and cellspacing which you will use to adjust the 
white space in your table cells. The cellspacing attribute defines space between table cells, 
while cellpadding represents the distance between cell borders and the content within a cell. 


Example: 


<!DOCTYPE html> 
<html> 








<head> 
<title>HTML Table Cellpadding</title> 
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</head> 


<body> 
<table border = "I" gellpadding = "5" cellapacing = "T> 
<tr> g 
<th>Name< 
ED 
</a 
Siet Ze E e 
_<td>Ramesh Raman</td> 
<td>5000</td> 













i | | 
| “Colspan and | 
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| 
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<!DOCTYPE html> 
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</head 
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<tr 
<td rov 
<td>Row Ss 
<td>Row 1 Cel </td> 
</tr> 
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<tr> 
<td>Row 2 Cell 2</td> 
<td>Row 2 Cell 3</td> 
</tr> 
LEEA 
<td cojer "3i>Rew=3=Ced1</TOe 
EE 
</table> 
</body> 








</html> 





Tables Backgrounds 


You can set table background using one of the following two ways - 
e bgcolor attribute - You can set background color for whole table or just for one cell. 


e background attribute - You can set background image for whole table or just for one 
cell. 


You can also set border color also using bordercolor attribute. 


Note - The bgcolor, background, and bordercolor attributes deprecated in HTML5. Do not use 
these attributes. 


Example 


<!BOCTYPE html> 








<html> 
<head> 
<title>HTML Table Background</title> 
</head> 
<body> 
<table border = "1" bordercolor = "green" bgcolor =s"yellow"> 
<CEA 
<th>Column 1</th> 
<th>Column 2</th> 
<th>Column 3</th> 
Kr 
Sea 
<td. rowspan = "2">Row 1 Cell 1</td> 
<td en, | Cell 2</td> 
<td>Row 1 Cell 3</td> 
SE 
SCr> 
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<td>Row 2 Cell 2</td> 
<td>Row 2 Cell 3</td> 
</tr> 
SES 
<td colspan 


‘example of using 


ages directory. 
E Ce 


<i! DOCTYPE html 
Khtml> j 
a 


L Table Background</title> 


m= "green" background 


afer 
SE 
<td rowspan = "2">Row 1 1</td> 
<td>Row 1 Cell 2</ S 
at r> 
KE 
<td>Row 2 Cell 2</td> 
<td>Row 2 Cell 3</td> 
Ae 


SE 
A coe SS D Celtes 


Table Height and Width 
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You can set a table width and height using width and height attributes. You can specify table 
width or height in terms of pixels or in terms of percentage of available screen area. 


Example 


<!DOCTYPE html> 
<html> 


<head> 
<title>HTML Table Width/Height</title> 
</head> 


<body> 
<table border = "1" width = "400" height = "150"> 
<ta 
<td>Row 1, Column 1</td> 
<td>Row 1, Column 2</td> 
EE 





RIES 
<td>Row Columa e e 
<td>Row eglumn Ze 
< de 
</table> 
</body> 


</html> 


Table Caption 





The caption tag will serve as a title or explanation for the table and it shows up at the top of 
the table. This tag is deprecated in newer version of HTML/XHTML. 


Example 


<MOCLYPE html 





<html 
<head> 
<title>HIML Table Caption</title> 
</head> 
<body> 
<table border = "1" width = “l00%s"> 


<caption>This is the caption</caption> 
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5 Es 


<td>row 1, column 1</td><td>row 1, 
SE 





columnn 2</td> 


SE 
<td>row 2, column 1</td><td>row 2, 
< de 
</table> 
</body> 


columnn 2</td> 


< / hiii > 





Table Header, Body, and Footer 


Tables can be divided into three portions - a header, a body, and a foot. The head and foot are 


rather similar to headers and footers in a word-processed document that remain the same for 
every page, while the body is the main content holder of the table. 


The three elements for separating the head, body, and foot of a table are - 
e <thead> - to create a separate table header. 
e <tbody> — to indicate the main body of the table. 


e <tfoot>- to create a separate table footer. 


A table may contain several <tbody> elements to indicate different pages or groups of data. 
But it is notable that <thead> and <tfoot> tags should appear before <tbody> 


Example 


<!DOCTYPE html> 
<hign 1 > 








<head> 


<title>HTML Table</title> 
</head> 


<body> 
<table border = "1" width = "100%"> 
<thead> 
<r> 


<td._colspan = "4">This is the head of the table</td> 
</ Cie 


</thead> 


<tfoot> 
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<tr> | 
<td colspan = "4">This is the foot of the table</td> | 
ST EES 
STEE 





<tbody> 
Ge 
<td>Cell 1</td> 
<td>Cell 2</td> 
<td>Cell 3</td> 
<td>Cell 4</td> 
</ tJ 
</tbody> 

















</table> 
</body> 


</html> 





Links and Bookmarks: 
Links: 


A webpage can contain various links that take you directly to other pages and even 
specific parts of a given page. These links are known as hyperlinks. 


Hyperlinks allow visitors to navigate between Web sites by clicking on words, phrases, and 
images. Thus you can create hyperlinks using text or images available on a webpage. 


Linking Documents 


A link is specified using HTML tag <a>. This tag is called anchor tag and anything between the 
opening <a> tag and the closing </a> tag becomes part of the link and a user can click that part 
to reach to the linked document. Following is the simple syntax to use <a> tag. 


<a href = "Document URL" ... attributes-list>Link Text</a> 


The target Attribute 


We have used target attribute in our previous example. This attribute is used to specify the 
location where linked document is opened. Following are the possible options — 


Sr.No Option & Description 
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blank 


Opens the linked document in a new window or tab. 


2 _self 

Opens the linked document in the same frame. 
à _parent 

Opens the linked document in the parent frame. 
4 _top 

Opens the linked document in the full body of the window. 
5 

targetframe 

Opens the linked document in a named targetframe. 
Example 


Try following example to understand basic difference in few options given for target attribute. 





sl DOT D btmlz 



































<html> 
<head> 
<title>Hyperlink Example</title> 
<base href = "https://www.tutorialspoint.com/"> 
</head> 
<body> 
<p>Click any of the following links</p> 
SW href = "/htmlAindex.htm" target = "eTank">Opens in 
New</a> | 
| <a href,=~“"/html/index.htm" target =" self">Opéns! in 
Self</a> | 
<a href = "üm /itdex.htm" target-==" basent" >Opens in 
Parent</a> | 
<a href = "/html/index.htm" target = H top">Opens in Body</a> 
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<a href = "https://www.tutorialspoint.com" target = " self"> 
<img sre = "/images/logo.png" alt = "Tutorials Point" 
border = "Q"/> 
</a> 


</body> 


</html> 





Bookmark: 
Bookmarks can be useful if a web page is very long. 


e To create a bookmark - first create the bookmark, then add a link to it. 
e When the link is clicked, the page will scroll down or up to the location with the 
bookmark. 


Example: 


First, use the id attribute to create a bookmark: 

<h2 id="C4">Chapter 4</h2> 

Then, add a link to the bookmark ("Jump to Chapter 4"), from within the same page: 
<a href="#C4">Jump to Chapter 4</a> 

You can also add a link to a bookmark on another page: 


<a href="html_demo.html#C4">Jump to Chapter 4</a> 
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Forms: 


HTML Forms are required, when you want to collect some data from the site visitor. For 
example, during user registration you would like to collect information such as name, email 
address, credit card, etc. 


A form will take input from the site visitor and then will post it to a back-end application such 
as CGI, ASP Script or PHP script etc. The back-end application will perform required processing 
on the passed data based on defined business logic inside the application. 


There are various form elements available like text fields, textarea fields, drop-down menus, 
radio buttons, checkboxes, etc. 


The HTML <form> tag is used to create an HTML form and it has following syntax — 








<form action = "Script URL" method = "GET|POST"> 
form elements like input, textarea etc. 
</form> 


Form Attributes 
Apart from common attributes, following is a list of the most frequently used form attributes — 


Sr.No Attribute & Description 


action 


Backend script ready to process your passed data. 


method 
Method to be used to upload data. The most frequently used are GET and POST methods. 
` target 
Specify the target window or frame where the result of the script will be displayed. It 
takes values like bank self, parent etc. 
4 


enctype 


You can use the enctype attribute to specify how the browser encodes the data before it 
sends it to the server. Possible values are - 


application/x-www-form-urlencoded - This is the standard method most forms use in 
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simple scenarios. 


mutlipart/form-data - This is used when you want to upload binary data in the form of 
files like image, word file etc. 


HTML Form Controls 
There are different types of form controls that you can use to collect data using HTML form - 


e Text Input Controls 

e Checkboxes Controls 

e Radio Box Controls 

e Select Box Controls 

e File Select boxes 

e Hidden Controls 

e Clickable Buttons 

e Submit and Reset Button 


Text Input Controls 


There are three types of text input used on forms - 


e Single-line text input controls — This control is used for items that require only one line 
of user input, such as search boxes or names. They are created using 
HTML <input> tag. 


e Password input controls - This is also a single-line text input but it masks the character 
as soon as a user enters it. They are also created using HTMI <input> tag. 


e Multi-line text input controls - This is used when the user is required to give details 
that may be longer than a single sentence. Multi-line input controls are created using 
HTML <textarea> tag. 


Single-line text input controls 


This control is used for items that require only one line of user input, such as search boxes or 
names. They are created using HTML <input> tag. 


Example 


Here is a basic example of a single-line text input used to take first name and last name - 
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<IDOCTYPE html> 
<html> 


<head> 
<title>Text Input Control</title> 
</head> 


<body> 
<form > 
First name: <input type = "text" name = "first name" /> 
Stee J 
Lët name: <inpubstypew=—itemp name = "last name /> 
</form> 
</body> 


¢/hntml> 


Attributes 





Following is the list of attributes for <input> tag for creating text field. 


Sr.No Attribute & Description 


type 


Indicates the type of input control and for text input control it will be set to text. 


2 
name 
Used to give a name to the control which is sent to the server to be recognized and get 
the value. 
3 value 
This can be used to provide an initial value inside the control. 
4 i 
size 
Allows to specify the width of the text-input control in terms of characters. 
5 


maxlength 
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Allows to specify the maximum number of characters a user can enter into the text box. 


Password input controls 


This is also a single-line text input but it masks the character as soon as a user enters it. They 
are also created using HTML <input>tag but type attribute is set to password. 


Example 


Here is a basic example of a single-line password input used to take user password - 





<!DOCTYPE html> 
<html> 





<head> 


<title>Password Input Control</title> 
</head> 





<body> 
<form > 
User ID : <input type = "text" name = "user id" /> 
<br> S 
Password: <input type = "password" name = "password" /> 
</form> 
</body> 














</html> 
Attributes 
Following is the list of attributes for <input> tag for creating password field. 


Sr.No Attribute & Description 


type 


Indicates the type of input control and for password input control it will be set 
to password. 
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name 


Used to give a name to the control which is sent to the server to be recognized and get 


the value. 
3 value 

This can be used to provide an initial value inside the control. 
4 i 

size 

Allows to specify the width of the text-input control in terms of characters. 
5 


maxlength 


Allows to specify the maximum number of characters a user can enter into the text box. 


Multiple-Line Text Input Controls 


This is used when the user is required to give details that may be longer than a single 
sentence. Multi-line input controls are created using HTML <textarea> tag. 


Example 


Here is a basic example of a multi-line text input used to take item description - 


M DOGIY PEMAtml> 
<html> 


<head> 
<title>Multiple-Line Input Control</title> 
</head> 





<body> 
< Rorm> 
Description : <br /> 


<textarea rows = "5" cols = "50" name = "description"> 
Enter description here... 
</textarea> 
</form> 
</body> 





</html> 
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Attributes 
Following is the list of attributes for <textarea> tag. 


Sr.No Attribute & Description 


name 


Used to give a name to the control which is sent to the server to be recognized and get 


the value. 
2 

rows 

Indicates the number of rows of text area box. 
3 cols 

Indicates the number of columns of text area box 
Checkbox Control 


Checkboxes are used when more than one option is required to be selected. They are also 
created using HTML <input> tag but type attribute is set to checkbox.. 


Example 


Here is an example HTML code for a form with two checkboxes - 





<!DOCTYPE html> 
Stolz 





<head> 
<title>€heckbox Control</title> 
</head> 


<body> 
<form> 
<input type = "checkbox" name = "maths" value = "on"> 





Maths 


<input type = "checkbox" name = "physics" value = "on"> 
Physics 
</form> 
</body> 
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| 
</html> 


Attributes 
Following is the list of attributes for <checkbox> tag. 


Sr.No Attribute & Description 


type 


Indicates the type of input control and for checkbox input control it will be set 
to checkbox.. 


2 
name 
Used to give a name to the control which is sent to the server to be recognized and get 
the value. 
S value 
The value that will be used if the checkbox is selected. 
4 


checked 


Set to checked if you want to select it by default. 


Radio Button Control 


Radio buttons are used when out of many options, just one option is required to be selected. 
They are also created using HTML <input> tag but type attribute is set to radio. 


Example 


Here is example HTML code for a form with two radio buttons - 











<!DOCTYPE html> 
<html> 


<head> 
| <title>Radio Box Control</title> | 
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</head> 





<body> 
<form> 
<input type = "radio" name = "Subject" value = "maths"> 
|Maths 
<input type = "radio" name = "subject" value = "physics"> 
Physics 
</form> 
</body> 


< / heart) > 





Attributes 
Following is the list of attributes for radio button. 


Sr.No Attribute & Description 


type 


Indicates the type of input control and for checkbox input control it will be set to radio. 


2 
name 
Used to give a name to the control which is sent to the server to be recognized and get 
the value. 
3 value 
The value that will be used if the radio box is selected. 
4 


checked 


Set to checked if you want to select it by default. 


Select Box Control 


A select box, also called drop down box which provides option to list down various options in 
the form of drop down list, from where a user can select one or more options. 


Example 


Page |18 | C. B. Patel Computer College, Surat 


Here is example HTML code for a form with one drop down box 


<!DOCTYPE html> 
<html> 


<head> 
<title>Select Box Control</title> 
</head> 





<body> 
<form> 


<select name = "dropdown"> 
<option value = "Maths" selected>Maths</option> 
<option value = "Physics">Physics</option> 
</select> 
<f forme 
</body> 





</html> 


Attributes 
Following is the list of important attributes of <select> tag - 


Sr.No Attribute & Description 


name 


Used to give a name to the control which is sent to the server to be recognized and get 


the value. 
2 : 

size 

This can be used to present a scrolling list box. 
3 


multiple 


If set to "multiple" then allows a user to select multiple items from the menu. 


Following is the list of important attributes of <option> tag - 


Sr.No Attribute & Description 
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value 


The value that will be used if an option in the select box box is selected. 


selected 


Specifies that this option should be the initially selected value when the page loads. 


label 


An alternative way of labeling options 


File Upload Box 

If you want to allow a user to upload a file to your web site, you will need to use a file upload 
box, also known as a file select box. This is also created using the <input> element but type 
attribute is set to file. 


Example 


Here is example HTML code for a form with one file upload box - 


<!DOCTYPE html> 
<html> 





<head> 
<title>File Upload Box</title> 
</head> 








<body> 


<form> 
<input type = "file" name = "fileupload" accept = 
"image/*" /> 
</form> 
</body> 





</html> 
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Attributes 
Following is the list of important attributes of file upload box - 


Sr.No Attribute & Description 


name 
Used to give a name to the control which is sent to the server to be recognized and get 
the value. 
Button Controls 
There are various ways in HTML to create clickable buttons. You can also create a clickable 
button using <input>tag by setting its type attribute to button. The type attribute can take the 


following values — 


Sr.No Type & Description 


submit 


This creates a button that automatically submits a form. 


reset 


This creates a button that automatically resets form controls to their initial values. 


button 


This creates a button that is used to trigger a client-side script when the user clicks that 
button. 


image 


This creates a clickable button but we can use an image as background of the button. 


Example 


Here is example HTML code for a form with three types of buttons - 
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<!DOCTYPE html> 
<html> 


<head> 
<title>File Upload Box</title> 
</head> 


<body> 


ER CH 
<input type = "submit" name = "submit" value = "Submit" /> 
<input type "reset" name = "reset" value = "Reset". /> 
<input type "button" name = "ok" value = "OK" /> 
<input type = "image" name = "imagebutton" src = 

"/html/images/logo.png" /> 
</form> 
</body> 


</html> 


Hidden Form Controls 





Hidden form controls are used to hide data inside the page which later on can be pushed to 
the server. This control hides inside the code and does not appear on the actual page. For 
example, following hidden form is being used to keep current page number. When a user will 
click next page then the value of hidden control will be sent to the web server and there it will 
decide which page will be displayed next based on the passed current page. 


Example 


Here is example HTML code to show the usage of hidden control - 


<!DOCTYPE html> 
<html> 
<head> 
<title>File Upload Box</title> 
</head> 
<body> 
<form 


<p>This is page 10</p> 
<input type = "hidden" name = "pagename" value = "10" /> 
<input type = "submit" name = "submit" value ="Submit" /> 
<input type = "reset" name = "reset" value =."Reset" /> 
</form> 
</body> 
</html> 
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